<template>
  <div class="exBox">
    <TopBack />
    <div class="topNavBox">
      <Drawer :drawer="drawer">
        <div class="drawerBox">
          <div class="drawerTopBox">
            <i class="drawerTopImg"></i>
            <span class="drawerTopText">发货地</span>
          </div>
          <div class="drawerTopItemBox">
            <div
              class="drawerTopItem"
              :class="{ drawerTopItemOn: v.falg }"
              v-for="(v, k) in drawer1Arr"
              :key="k + '抽屉'"
              @click.stop="setOn(drawer1Arr, k, true)"
            >
              <img
                v-if="v.falg"
                class="drawerTopItemImgOn"
                src="../../../../../assets/zfc-img/选中对勾图标.png"
                alt=""
              />
              {{ v.text }}
            </div>
          </div>
          <div class="drawerTopBox">
            <i class="drawerTopImg drawerConterImg"></i>
            <span class="drawerTopText">商品类型</span>
          </div>
          <div class="drawerTopItemBox drawerConterItemBox">
            <div
              class="drawerTopItem"
              :class="{ drawerTopItemOn: v.falg }"
              v-for="(v, k) in drawer2Arr"
              :key="k + '抽屉'"
              @click.stop="setOn(drawer2Arr, k, true)"
            >
              <img
                v-if="v.falg"
                class="drawerTopItemImgOn"
                src="../../../../../assets/zfc-img/选中对勾图标.png"
                alt=""
              />
              {{ v.text }}
            </div>
          </div>
          <div class="drawerTopBox">
            <i class="drawerTopImg drawerBottomImg"></i>
            <span class="drawerTopText">分类</span>
          </div>
          <div class="drawerTopItemBox drawerBottomItemBox">
            <template v-for="(v, k) in drawer3Arr">
              <div
                class="drawerTopItem"
                :class="{ drawerTopItemOn: v.falg }"
                @click.stop="setOn(drawer3Arr, k, false)"
                :key="k + '抽屉'"
                v-if="k < 20"
              >
                <img
                  v-if="v.falg"
                  class="drawerTopItemImgOn"
                  src="../../../../../assets/zfc-img/选中对勾图标.png"
                  alt=""
                />
                {{ v.text }}
              </div>
            </template>
            <div class="drawerBottomItemAdd" @click="setDrawerInside()">
              <span class="drawerBottomItemAddText">更多分类</span>
              <img
                class="drawerBottomItemAddImg"
                src="../../../../../assets/zfc-img/右箭头.png"
                alt=""
              />
              <Drawer :drawer="drawerInside" :modal="false">
                <TopBack
                  :boxStyle="true"
                  :imgLUrl="require('../../../../../assets/zfc-img/左箭头黑版.png')"
                  :css="css.a"
                  :cssTextC="css.b"
                  textRight="确定"
                ></TopBack>
                <div
                  class="drawerInsideItemBox"
                  v-for="(v, k) in drawer3Arr"
                  :key="k + '类表格'"
                  @click="setOn(drawer3Arr, k, false)"
                >
                  <span
                    class="drawerInsideItemText"
                    :class="{ drawerInsideItemTextOn: v.falg }"
                    >{{ v.text }}</span
                  >
                  <img
                    v-if="v.falg"
                    class="drawerInsideItemImg"
                    src="../../../../../assets/zfc-img/分类列表选中图标.png"
                    alt=""
                  />
                </div>
              </Drawer>
            </div>
          </div>
          <div class="drawerBtnS">
            <div class="drawerBtn drawerBtn1" @click="resetDrawerArr()">重置</div>
            <div class="drawerBtn drawerBtn2">确定</div>
          </div>
        </div>
      </Drawer>
      <div
        class="topNavItem"
        v-for="(v, k) in topNavArr"
        :key="k + 'topNav'"
        @click="getTNCK(k)"
      >
        <span class="topNavItemText" :class="{ topNavItemTextOn: v.falg }">{{
          v.text
        }}</span>
        <img class="topNavItemImg" v-if="v.imgR" :src="v.imgR" alt="" />
      </div>
    </div>
    <div class="topSxBox">
      <div class="topSxItemBox">
        <div class="topSxItem" v-for="(v, k) in topSxArr" :key="k + 'Sx'">
          <span class="topSxItemText">{{ v.text }}</span>
          <img class="topSxItemImg" src="@/assets/zfc-img/取消图标.png" alt="" />
        </div>
      </div>
      <div class="topSxItemCk">清空</div>
    </div>
    <div class="conterSxC">
      <div class="conterSxCItemBox" v-for="(v, k) in conterSxCArr" :key="k + '商品信息'">
        <div class="conterSxCItemImgBox">
          <img class="conterSxCItemImg" :src="v.imgUrl" alt="" />
        </div>
        <div class="conterSxCItemTextBox">
          <h2 class="conterSxCItemTextH2">{{ v.title }}</h2>
          <p class="conterSxCItemTextP">{{ v.p }}</p>
          <div class="conterSxCItemTextBtmBox">
            <img class="conterSxCItemTextBtmImg1" :src="v.ydgjImg" alt="" />
            <img class="conterSxCItemTextBtmImg2" :src="v.ydStyleImg" alt="" />
            <span class="conterSxCItemTextBtmText1">{{ v.ydStyle }}</span>
            <span class="conterSxCItemTextBtmText2">{{ v.pro }}</span>
          </div>
        </div>
      </div>
    </div>
    <router-link to="" class="ggImgBox"> </router-link>
    <div class="addTopSx">加载更多</div>
  </div>
</template>

<script>
import TopBack from "../../TopNav/TopBack";
import Drawer from "./drawer";
export default {
  name: "Leaflets1",
  data() {
    return {
      drawer: false, // 控制抽屉层
      drawerInside: false, // 控制抽屉的内层抽屉
      topNavArr: [
        {
          text: "销量",
          imgR: "",
          falg: true,
        },
        {
          text: "最新",
          imgR: "",
          falg: false,
        },
        {
          text: "价格",
          imgR: require("@/assets/zfc-img/文本导航图标.png"),
          falg: false,
        },
        {
          text: "筛选",
          imgR: "",
          falg: false,
        },
      ],
      topSxArr: [
        {
          text: "洁面护理",
          falg: false,
        },
        {
          text: "人气口红",
          falg: false,
        },
      ],
      conterSxCArr: [
        {
          imgUrl: require("@/assets/zfc-img/商品示例/商品图.png"),
          title: "焕彩萃璨花蕊唇彩4.8g",
          p: "焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g",
          ydgjImg: require("@/assets/zfc-img/商品示例/邮递国家.png"),
          ydStyleImg: require("@/assets/zfc-img/商品示例/邮递方式.png"),
          ydStyle: "海外直邮",
          pro: "￥166.06",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/商品示例/商品图.png"),
          title: "焕彩萃璨花蕊唇彩4.8g",
          p: "焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g",
          ydgjImg: require("@/assets/zfc-img/商品示例/邮递国家.png"),
          ydStyleImg: require("@/assets/zfc-img/商品示例/邮递方式.png"),
          ydStyle: "海外直邮",
          pro: "￥166.06",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/商品示例/商品图.png"),
          title: "焕彩萃璨花蕊唇彩4.8g",
          p: "焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g",
          ydgjImg: require("@/assets/zfc-img/商品示例/邮递国家.png"),
          ydStyleImg: require("@/assets/zfc-img/商品示例/邮递方式.png"),
          ydStyle: "海外直邮",
          pro: "￥166.06",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/商品示例/商品图.png"),
          title: "焕彩萃璨花蕊唇彩4.8g",
          p: "焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g",
          ydgjImg: require("@/assets/zfc-img/商品示例/邮递国家.png"),
          ydStyleImg: require("@/assets/zfc-img/商品示例/邮递方式.png"),
          ydStyle: "海外直邮",
          pro: "￥166.06",
          falg: false,
        },
      ],
      drawer1Arr: [
        {
          text: "日本",
          falg: false,
        },
        {
          text: "美国",
          falg: false,
        },
        {
          text: "中国",
          falg: false,
        },
        {
          text: "澳大利亚",
          falg: false,
        },
        {
          text: "英国",
          falg: false,
        },
      ],
      drawer2Arr: [
        {
          text: "首发商品",
          falg: false,
        },
        {
          text: "促销商品",
          falg: false,
        },
      ],
      drawer3Arr: [
        {
          text: "洁面护理",
          falg: false,
        },
        {
          text: "人气口红",
          falg: false,
        },
        {
          text: "名牌包包",
          falg: false,
        },
        {
          text: "洁面护理",
          falg: false,
        },
        {
          text: "人气口红",
          falg: false,
        },
        {
          text: "名牌包包",
          falg: false,
        },
        {
          text: "洁面护理",
          falg: false,
        },
        {
          text: "人气口红",
          falg: false,
        },
        {
          text: "名牌包包",
          falg: false,
        },
        {
          text: "洁面护理",
          falg: false,
        },
        {
          text: "人气口红",
          falg: false,
        },
        {
          text: "名牌包包",
          falg: false,
        },
        {
          text: "洁面护理",
          falg: false,
        },
        {
          text: "人气口红",
          falg: false,
        },
        {
          text: "名牌包包",
          falg: false,
        },
        {
          text: "洁面护理",
          falg: false,
        },
        {
          text: "人气口红",
          falg: false,
        },
        {
          text: "名牌包包",
          falg: false,
        },
        {
          text: "洁面护理",
          falg: false,
        },
        {
          text: "人气口红",
          falg: false,
        },
        {
          text: "名牌包包",
          falg: false,
        },
        {
          text: "名牌包包",
          falg: false,
        },
      ],
      css: {
        a: {
          backgroundColor: "#f2f2f2",
        },
        b: {
          color: "#4c4c4c",
        },
      },
    };
  },
  methods: {
    getTNCK(k) {
      this.topNavArr.forEach((v) => {
        v.falg = false;
      });
      this.topNavArr[k].falg = true;
      console.log(k);
      if (k == 3) {
        this.drawer = true;
      }
    },
    setDrawerInside() {
      this.drawerInside = true;
    },
    setOn(arr, k, d, fun) {
      if (d) {
        arr.forEach((v) => {
          v.falg = false;
        });
      }
      arr[k].falg = !arr[k].falg;
      if (fun) {
        fun();
      }
    },
    resetDrawerArr() {
      this.drawer1Arr.forEach((v) => {
        v.falg = false;
      });
      this.drawer2Arr.forEach((v) => {
        v.falg = false;
      });
      this.drawer3Arr.forEach((v) => {
        v.falg = false;
      });
    },
  },
  components: {
    TopBack,
    Drawer,
  },
};
</script>

<style scoped>
* {
  overflow: hidden;
}
.exBox {
  width: 100%;
  margin-bottom: 1rem;
}
.topNavBox {
  width: calc(7.2rem - 0.6rem);
  height: 0.79rem;
  padding: 0 0.2rem;
  border: 1px solid #cccccc;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topNavItem {
  height: 100%;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topNavItemText {
  font-size: 0.28rem;
  color: #4c4c4c;
}
.topNavItemImg {
  width: 0.08rem;
  height: 0.17rem;
  margin-left: 0.15rem;
}
.topNavItemTextOn {
  color: #e53e42;
}
/* 筛选 */
.topSxBox {
  width: calc(7.2rem - 0.6rem);
  height: 0.96rem;
  /* padding-left: 0.2rem; */
  /* padding-right:0.2rem ; */
  padding: 0 0.2rem;
  border-bottom: 0.01rem solid #cccccc;
  position: relative;
}
.topSxItemBox {
  width: 5.6rem;
  height: 100%;
  display: flex;
  align-items: center;
}
.topSxItem {
  height: 0.6rem;
  border-radius: 0.09rem;
  margin-right: 0.2rem;
  padding: 0 0.16rem 0 0.15rem;
  background-color: #999999;
  display: flex;
  align-items: center;
}
.topSxItemText {
  font-size: 0.24rem;
  color: #ffffff;
}
.topSxItemImg {
  width: 0.18rem;
  height: 0.18rem;
  margin-left: 0.19rem;
}
.topSxItemCk {
  width: 0.98rem;
  height: 0.58rem;
  font-size: 0.24rem;
  color: #4c4c4c;
  border: 0.01rem solid #4d4d4d;
  border-radius: 0.09rem;
  text-align: center;
  line-height: 0.58rem;
  position: absolute;
  top: 0.18rem;
  right: 0.21rem;
}
.conterSxC {
  width: 7.2rem;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
}
/* 商品详情 */
.conterSxCItemBox {
  width: calc(100% - 0.6rem);
  height: 2rem;
  background-color: #ffffff;
  border-top: 0.01rem solid #cccccc;
  border-bottom: 0.01rem solid #cccccc;
  padding: 0 0.2rem;
  margin-bottom: 0.2rem;
  font-size: 0;
  display: flex;
}
.conterSxCItemBox:nth-last-of-type(1) {
  margin-bottom: 0;
}
.conterSxCItemImgBox {
  width: 1.8rem;
  height: 100%;
  margin-right: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.conterSxCItemImg {
  margin: 0 auto;
}
.conterSxCItemTextBox {
  width: calc(100% - 2rem);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.conterSxCItemTextH2 {
  height: 0.28rem;
  line-height: 0.28rem;
  font-size: 0.3rem;
  color: #333333;
  padding-top: 0.28rem;
  padding-bottom: 0.15rem;
}
.conterSxCItemTextP {
  height: calc(0.36rem * 2);
  line-height: 0.36rem;
  font-size: 0.24rem;
  color: #4c4c4c;
}
.conterSxCItemTextBtmBox {
  flex-grow: 1;
  position: relative;
}
.conterSxCItemTextBtmImg1 {
  position: absolute;
  top: 0.16rem;
  left: 0.2rem;
}
.conterSxCItemTextBtmImg2 {
  position: absolute;
  top: 0.06rem;
  left: 0.69rem;
}
.conterSxCItemTextBtmText1 {
  height: 0.2rem;
  line-height: 0.2rem;
  font-size: 0.2rem;
  color: #666666;
  position: absolute;
  top: 0.13rem;
  left: 1.11rem;
}
.conterSxCItemTextBtmText2 {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.3rem;
  color: #e53e42;
  position: absolute;
  top: 0.11rem;
  right: 0;
}
/* 广告 */
.ggImgBox {
  display: block;
  width: 7.2rem;
  height: 2.23rem;
  background: url("../../../../../assets/zfc-img/分类广告.png") 0 0 /100% 2.23rem no-repeat;
}
/* 加载更多 */
.addTopSx {
  width: 7.2rem;
  height: 0.73rem;
  line-height: 0.73rem;
  font-size: 0.24rem;
  color: #808080;
  text-align: center;
  background-color: #f2f2f2;
}
/* 抽屉 */
.drawerTopBox {
  width: 100%;
  height: 0.8rem;
  padding-left: 0.7rem;
  display: flex;
  align-items: center;
  position: relative;
}
.drawerTopImg {
  width: 0.34rem;
  height: 0.3rem;
  background: url("../../../../../assets/zfc-img/分类抽屉图标.png") 0 0/0.34rem no-repeat;
  position: absolute;
  top: 0.25rem;
  left: 0.2rem;
}
.drawerTopText {
  font-size: 0.3rem;
  color: #4c4c4c;
}
.drawerTopItemBox {
  width: 5.4rem;
  height: 1.8rem;
  padding-left: 0.2rem;
  padding-bottom: 0.2rem;
  border-bottom: 0.01rem solid #cccccc;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.drawerTopItem {
  width: 1.6rem;
  height: 0.8rem;
  margin-right: 0.2rem;
  font-size: 0.28rem;
  color: #4c4c4c;
  border-radius: 0.09rem;
  background-color: #f2f2f2;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.drawerTopItemImgOn {
  width: 0.5rem;
  height: 0.39rem;
  position: absolute;
  top: 0;
  left: 0;
}
.drawerTopItemOn {
  background-color: #ffd3d3;
  color: #e53e42;
}

/* 重复*2 */
.drawerConterImg {
  height: 0.34rem;
  background: url("../../../../../assets/zfc-img/分类抽屉图标.png") 0 -0.5rem/0.34rem no-repeat;
  top: 0.23rem;
}
.drawerConterItemBox {
  height: 0.8rem;
}

.drawerBottomImg {
  height: 0.25rem;
  background: url("../../../../../assets/zfc-img/分类抽屉图标.png") 0 -1rem/0.34rem no-repeat;
  top: 0.28rem;
}
.drawerBottomItemBox {
  height: 6.8rem;
  margin-bottom: 0.87rem;
}

/* 更多分类 */
.drawerBottomItemAdd {
  width: 1.6rem;
  height: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drawerBottomItemAddText {
  font-size: 0.24rem;
  color: #808080;
}
.drawerBottomItemAddImg {
  width: 0.14rem;
  height: 0.24rem;
  margin-left: 0.09rem;
}

/* 底部按钮*2 */
.drawerBtnS {
  width: 100%;
  height: 1rem;
  display: flex;
}
.drawerBtn {
  height: 100%;
  font-size: 0.3rem;
  border: none;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drawerBtn1 {
  color: #4c4c4c;
  background-color: #f2f2f2;
}
.drawerBtn2 {
  color: #ffffff;
  background-color: #e53e42;
}
/* 抽屉内嵌的抽屉 */
.drawerInsideItemBox {
  width: 5.2rem;
  height: 0.6rem;
  margin: 0 auto;
  border-bottom: 0.01rem solid #cccccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawerInsideItemBox:nth-last-of-type(1) {
  border-bottom: none;
}
.drawerInsideItemText {
  font-size: 0.28rem;
  color: #4c4c4c;
}
.drawerInsideItemTextOn {
  color: #e53e42;
}
</style>
